<!DOCTYPE html PUBLIC 
    "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/base/templates/main-gui.xhtml">
    <ui:define name="content">
        <h:form id="formGestion">
            <p:growl id="messages" showSummary="false" showDetail="true" life="3000" />
            <p:panel id="panel" header="#{bundle_cuenta.label_titulo_gestion_productos}">
                <br />
                <p:panelGrid style="width: 100%">
                    <p:row>
                        <p:column>
                            <table cellpadding="0" cellspacing="0" width="100%">
                                <tr>
                                    <td colspan="2">
                                        <p:graphicImage url="/resources/images/16x16/star-full-icon.png" style="vertical-align: middle" />
                                        &nbsp;
                                        #{bundle_cuenta.label_titulo_seleccione_producto}
                                        <br/><br/>
                                    </td>
                                </tr>
                                <tr>
                                    <td valign="top">
                                        <p:dataTable id="cuentasTable"  
                                                     widgetVar="widgetCuentas"
                                                     var="cuenta" 
                                                     value="#{cuentaBacking.cuentasList}"    
                                                     rowKey ="#{cuenta.numero}" 
                                                     paginator="true"
                                                     paginatorPosition="bottom"
                                                     rows="5" 
                                                     selectionMode="single"
                                                     selection="#{cuentaBacking.selectedCuenta}"
                                                     emptyMessage="#{bundle_comun.label_paginador_empty}"
                                                     paginatorTemplate="#{bundle_comun.label_paginador_template}"  
                                                     currentPageReportTemplate="#{bundle_comun.label_paginador_currentTemplate}">

                                            <p:ajax event="rowSelect" 
                                                    listener="#{cuentaBacking.listarMovimientos}"
                                                    update="@form" />

                                            <p:column headerText="&nbsp;#{bundle_cuenta.label_resultados_tabla_estado}" 
                                                      sortBy="#{cuenta.estado}"
                                                      style="text-align: center; width: 10%"> 
                                                <p:graphicImage url="/resources/images/16x16/#{cuenta.estado eq 'S' ? 'status-active-icon.png' : cuenta.estado eq 'N' ? 'status-red-icon.png' : cuenta.estado eq 'R' ? 'status-disabled-icon.png' : 'question-icon.png'}" 
                                                                title="#{cuenta.estado}"
                                                                style="vertical-align: middle" />
                                            </p:column>

                                            <p:column headerText="&nbsp;#{bundle_cuenta.label_resultados_tabla_numero}" 
                                                      sortBy="#{cuenta.numero}"
                                                      style="text-align: left">              
                                                #{cuenta.numero}
                                            </p:column>

                                            <p:column headerText="&nbsp;#{bundle_cuenta.label_resultados_tabla_saldo}" 
                                                      sortBy="#{cuenta.saldo}"
                                                      style="text-align: right">              
                                                <h:outputText value="#{cuenta.saldo}" >
                                                    <f:convertNumber pattern="$###,###.##" />
                                                </h:outputText>
                                            </p:column>

                                        </p:dataTable>
                                    </td>
                                </tr>
                            </table>
                            <p:messages id="msg" showSummary="true" showDetail="true" />
                        </p:column>
                    </p:row>
                    <p:row binding="#{cuentaBacking.rowMovimientos}">
                        <p:column>
                            <table cellpadding="0" cellspacing="0" width="100%">
                                <tr>
                                    <td colspan="2">
                                        <br/>
                                        <p:graphicImage url="/resources/images/16x16/star-full-icon.png" style="vertical-align: middle" />
                                        &nbsp;
                                        #{bundle_cuenta.label_movimientos_mostrando}
                                        <br/><br/>
                                    </td>
                                </tr>
                                <tr>
                                    <td width="250" valign="top">
                                        <p:panel id="filtros" header="#{bundle_cuenta.label_movimientos_filtrar}">
                                            <p:panelGrid style="width: 100%; border: none; padding: 5px">
                                                <p:row>
                                                    <p:column>
                                                        <br/>
                                                        <h:outputLabel value="#{bundle_cuenta.label_movimientos_fecha_desde}:" />
                                                        <br/>
                                                        <p:calendar style="width: 75%"
                                                                    label="#{bundle_cuenta.label_movimientos_fecha_desde}"
                                                                    required="false"
                                                                    maxlength="50"
                                                                    pattern="dd/MM/yyyy"
                                                                    value="#{cuentaBacking.dateInicial}"
                                                                    showOn="button"/>
                                                    </p:column>
                                                </p:row>

                                                <p:row>
                                                    <p:column>
                                                        <h:outputLabel value="#{bundle_cuenta.label_movimientos_fecha_hasta}:" />
                                                        <br/>
                                                        <p:calendar style="width: 75%"
                                                                    label="#{bundle_cuenta.label_movimientos_fecha_hasta}"
                                                                    required="false"
                                                                    maxlength="50"
                                                                    pattern="dd/MM/yyyy"
                                                                    value="#{cuentaBacking.dateFinal}"
                                                                    showOn="button"/> 
                                                        <br/><br/>
                                                    </p:column>
                                                </p:row>

                                                <p:row>
                                                    <p:column style="text-align: right">
                                                        <p:commandButton value="#{bundle_comun.button_consultar}" 
                                                                         title="#{bundle_comun.button_consultar}" 
                                                                         action="#{cuentaBacking.filtrarMovimientos}" 
                                                                         update="@form"
                                                                         icon="consultar"
                                                                         style="margin:0"/>
                                                        <p:commandButton value="#{bundle_comun.button_limpiar}" 
                                                                         title="#{bundle_comun.button_limpiar}" 
                                                                         action="#{cuentaBacking.resetFiltros}"
                                                                         update="@form"
                                                                         icon="limpiar" />
                                                    </p:column>
                                                </p:row>

                                            </p:panelGrid>
                                        </p:panel>
                                    </td>
                                    <td valign="top">
                                        <p:tabView id="tabMovimientos">  
                                            <p:tab id="consignaciones" title="#{bundle_cuenta.label_movimientos_consignaciones}"> 
                                                <p:dataTable id="consignacionesTable"  
                                                             widgetVar="widgetConsignaciones"
                                                             var="consignacion" 
                                                             value="#{cuentaBacking.consignacionesList}"    
                                                             rowKey ="#{consignacion.codigo}" 
                                                             paginator="true"
                                                             paginatorPosition="bottom"
                                                             rows="10" 
                                                             selectionMode="single"
                                                             emptyMessage="#{bundle_comun.label_paginador_empty}"
                                                             paginatorTemplate="#{bundle_comun.label_paginador_template}"  
                                                             currentPageReportTemplate="#{bundle_comun.label_paginador_currentTemplate}"
                                                             rowsPerPageTemplate="#{bundle_comun.label_paginador_rowsTemplate}">

                                                    <p:column headerText="&nbsp;#{bundle_cuenta.label_movimientos_fecha}" 
                                                              sortBy="#{consignacion.fecha}"
                                                              style="text-align: center"> 
                                                        #{consignacion.fecha}
                                                    </p:column>

                                                    <p:column headerText="&nbsp;#{bundle_cuenta.label_movimientos_codigo}" 
                                                              sortBy="#{consignacion.codigo}"
                                                              style="text-align: center">              
                                                        #{consignacion.codigo}
                                                    </p:column>

                                                    <p:column headerText="&nbsp;#{bundle_cuenta.label_movimientos_descripcion}" 
                                                              sortBy="#{consignacion.descripcion}"
                                                              style="text-align: left">              
                                                        #{consignacion.descripcion}
                                                    </p:column>

                                                    <p:column headerText="&nbsp;#{bundle_cuenta.label_movimientos_valor}" 
                                                              sortBy="#{consignacion.valor}"
                                                              style="text-align: right">              
                                                        <h:outputText value="#{consignacion.valor}" >
                                                            <f:convertNumber pattern="$###,###.##" />
                                                        </h:outputText>
                                                    </p:column>

                                                </p:dataTable>
                                            </p:tab>

                                            <p:tab id="retiros" title="#{bundle_cuenta.label_movimientos_retiros}"> 
                                                <p:dataTable id="retirosTable"  
                                                             widgetVar="widgetRetiros"
                                                             var="retiro" 
                                                             value="#{cuentaBacking.retirosList}"    
                                                             rowKey ="#{retiro.codigo}" 
                                                             paginator="true"
                                                             paginatorPosition="bottom"
                                                             rows="10" 
                                                             selectionMode="single"
                                                             emptyMessage="#{bundle_comun.label_paginador_empty}"
                                                             paginatorTemplate="#{bundle_comun.label_paginador_template}"  
                                                             currentPageReportTemplate="#{bundle_comun.label_paginador_currentTemplate}"
                                                             rowsPerPageTemplate="#{bundle_comun.label_paginador_rowsTemplate}">

                                                    <p:column headerText="&nbsp;#{bundle_cuenta.label_movimientos_fecha}" 
                                                              sortBy="#{retiro.fecha}"
                                                              style="text-align: center"> 
                                                        #{retiro.fecha}
                                                    </p:column>

                                                    <p:column headerText="&nbsp;#{bundle_cuenta.label_movimientos_codigo}" 
                                                              sortBy="#{retiro.codigo}"
                                                              style="text-align: center">              
                                                        #{retiro.codigo}
                                                    </p:column>

                                                    <p:column headerText="&nbsp;#{bundle_cuenta.label_movimientos_descripcion}" 
                                                              sortBy="#{retiro.descripcion}"
                                                              style="text-align: left">              
                                                        #{retiro.descripcion}
                                                    </p:column>

                                                    <p:column headerText="&nbsp;#{bundle_cuenta.label_movimientos_valor}" 
                                                              sortBy="#{retiro.valor}"
                                                              style="text-align: right">              
                                                        <h:outputText value="#{retiro.valor}" >
                                                            <f:convertNumber pattern="$###,###.##" />
                                                        </h:outputText>
                                                    </p:column>

                                                </p:dataTable>
                                            </p:tab>
                                        </p:tabView>
                                    </td>
                                </tr>
                            </table>
                        </p:column>
                    </p:row>
                </p:panelGrid>
                <br />
            </p:panel>
        </h:form>
    </ui:define>
</ui:composition>